<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
	<button type="button" onclick="Butonclick();">按钮1</button>
	<div id="div1" >
		
	</div>
	<!-- 3.登入页面 -->
	
	<!-- 用户名输入框， -->
	  用户：<input type="text" id="username" value="" onfocus="usernamefocus（）；" />
	  <br/>
	<!-- 密码输入框， -->
	 密码：<input type="text" id="pwd" value=""/>
	 <br/>
<!-- 	提交按钮 -->
	 <button type="submit">提交</button>
	</body>
	<script type="text/javascript">
		<!--  3.1 用户名框获取焦点事件，控制台输出：用户在输入名称 -->
			function usernamefocus(){
				console.log('用户在输入名称');
			}
			         <!-- 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名 -->
		    function username(){
				if(username.value==''){
					alert('没有输入用户名');
					return;
				}
			}	 
			        <!-- 3.3  密码框获取焦点事件，控制台输出：用户在输入密码 -->
			function pwdfocus(){
				console.log('用户在输入密码');
				}		 
			        <!-- 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码 -->
			function pwd(){
				if(pwd.value==''){
					alert('用户没有输入密码');
					return;
				}			
			        
			         // 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
			                       // 密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
				function Button1(){
					if(username.value==''){
					alert('用户名为空');	
					}else if(pwd.value==''){
					alert('密码为空');	
					}else{
				   console.log('用户名和密码为空');
					}
				
				}		  
		<!-- 	4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 --> 
			
	</script>
	
</html>
